import React from "react";
export default class SearchBar extends React.Component {
    constructor(...props) {
        super(...props);
        this.state = {
            keyword: ''
        };
    }

    onChange(e) {
        this.setState({
            keyword: e.target.value
        });
    }

    onSubmit(e) {
        e.preventDefault();
        this.props.onSearch(this.state.keyword);
    }

    render() {
        return (
            <form className="component-searchbar form-inline" onSubmit={e=>this.onSubmit(e)}>
                <label htmlFor="keyword">{this.props.label}</label>
                <input className="form-control" type="text" placeholder={this.props.placeholder}
                       onChange={(e)=>this.onChange(e)}
                       value={this.state.keyword}/>
                <button className="btn btn-success">搜索</button>
            </form>
        )
    }
}

SearchBar.propTypes = {
    label: React.PropTypes.string.isRequired,
    placeholder: React.PropTypes.string.isRequired,
    onSearch: React.PropTypes.func.isRequired
};

SearchBar.defaultProps = {
    label: '搜索'
};